<template>
    <div style="height: 95%;width: 100%;display:flex;justify-content:center;padding-top: 20px">
        <!--弹框DIV 设置弹框的大小的地方-->
        <div style="background: #fff;width: 700px;height: 600px;box-shadow: #D3DCE6 0px 0px 20px;">
            <div style="height:520px;border: #1C84C6;margin-top: 25px" class="scrollbar">
                <div style="height: 30px;">
                    <!--标题-->
                    <span style="font-size: 18px;margin-left: 25px;">
                        新建订单
                    </span>
                    <!--返回列表-->
                        <span style="margin-left: 530px;" @click="tzdz()">
                            <i slot="suffix" style="font-size: 30px;color: #D3DCE6" class="el-icon-close"></i>
                        </span>
                </div>
                <!--height:91%;表单在弹框显示多长-->
                <el-scrollbar style="height:91%;padding-top: 20px;">
                    <div class="shugan"></div>
                    <span style="margin-left: 10px;font-size: 14px;">基本信息</span>
                    <br/>
                    <br/>
                    <!--表单-->
                    <el-form style="margin-top:5px;margin-left: 50px;" :rules="rules" size="mini" :model="ddlist" ref="ddlist">
                        <el-row>
                            <el-col :span="10">
                                <el-form-item style="width:250px">
                                    <label slot="label" style="font-size: 13px">订单主题：</label><br/>
                                    <el-input v-model="ddlist.orderTheme"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="width:250px;">
                                    <label slot="label" style="font-size: 13px">订单编号：</label><br/>
                                    <el-input v-model="ddlist.orderNo" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item style="width:250px;" prop="clientId">
                                    <label slot="label" style="font-size: 13px">客户：</label><br/>
                                    <!--客户名称-->
                                    <el-popover
                                            style="width: 700px; height: 450px;"
                                            placement="right"
                                            trigger="click"
                                            v-model="kehu">
                                        <span style="font-size: 16px;">关联客户模块</span>
                                        <br/>
                                        <el-input @keyup.enter.native="cx()" v-model="kehuinput" style="width: 210px; margin-left: 230px; margin-bottom: 10px;">
                                            <i slot="suffix" class="el-input__icon el-icon-search" @click="cx()"></i>
                                        </el-input>
                                        <el-button type="primary" style="margin-left: 130px;">新 建</el-button>
                                        <el-table
                                                highlight-current-row
                                                border
                                                ref="kehulist"
                                                :data="kehulist">
                                            <el-table-column type="selection" width="50" align="center" property="clientId"></el-table-column>
                                            <el-table-column width="150" property="clientName" label="客户名称"></el-table-column>
                                            <el-table-column width="100" property="clientRank" label="级别"></el-table-column>
                                            <el-table-column width="150" property="clientMobile" label="手机号码"></el-table-column>
                                            <el-table-column width="200" property="clientSite" label="地址"></el-table-column>
                                        </el-table>
                                        <el-pagination
                                                style="margin-left: 350px;"
                                                layout="prev, pager, next"
                                                @current-change="handleCurrentChange"
                                                :page-size="pageSize"
                                                :current-page.sync="currPage"
                                                :total="totalSize">
                                        </el-pagination>
                                        <div style="text-align: center;width: 100%" class="dialog-footer">
                                            <el-button type="primary" @click="xzkehu">保 存</el-button>
                                            <el-button type="primary" @click="kehu = false">取 消</el-button>
                                        </div>
                                        <el-input v-if="this.xg==0" v-model="ddlist.clientId.clientName" placeholder="+添加" slot="reference" :readonly='true' style="width: 250px;"></el-input>
                                    </el-popover>
                                    <el-input v-if="this.xg==1" :disabled="true" v-model="ddlist.clientId.clientName" placeholder="+添加" :readonly='true' style="width: 250px;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="width:250px" prop="conId">
                                    <label slot="label" style="font-size: 13px">合同：</label><br/>
                                    <!--合同-->
                                    <el-popover
                                            style="width: 700px; height: 450px;"
                                            placement="right"
                                            trigger="click"
                                            v-model="heton">
                                        <span style="font-size: 16px;">关联合同模块</span>
                                        <br/>
                                        <el-input @keyup.enter.native="cx2()" v-model="hetoninput" style="width: 210px; margin-left: 230px; margin-bottom: 10px;">
                                            <i slot="suffix" class="el-input__icon el-icon-search" @click="cx2()"></i>
                                        </el-input>
                                        <el-button type="primary" style="margin-left: 100px;">新 建</el-button>
                                        <el-table
                                                highlight-current-row
                                                border
                                                ref="hetonlist"
                                                :data="hetonlist">
                                            <el-table-column type="selection" width="50" align="center" property="conId"></el-table-column>
                                            <el-table-column width="150" property="conTheme" label="主题"></el-table-column>
                                            <el-table-column width="170" property="conNo" label="合同编号"></el-table-column>
                                            <el-table-column label="签约时间" align="conTime" width="200">
                                                <template slot-scope="d">
                                                    {{d.row.conTime | formatDate}}
                                                </template>
                                            </el-table-column>
                                            <el-table-column width="100" property="conTotal" label="总金额"></el-table-column>
                                        </el-table>
                                        <el-pagination
                                                style="margin-left: 350px;"
                                                layout="prev, pager, next"
                                                @current-change="handleCurrentChange2"
                                                :page-size="pageSize2"
                                                :current-page.sync="currPage2"
                                                :total="totalSize2">
                                        </el-pagination>
                                        <div style="text-align: center;width: 100%" class="dialog-footer">
                                            <el-button type="primary" @click="xzheton">保 存</el-button>
                                            <el-button type="primary" @click="heton = false">取 消</el-button>
                                        </div>
                                        <el-input  v-if="this.xg==0" v-model="ddlist.conId.conTheme" @focus="dakai" placeholder="+添加" slot="reference" :readonly='true' style="width: 250px;"></el-input>
                                    </el-popover>
                                    <el-input v-if="this.xg==1" :disabled="true" v-model="ddlist.conId.conTheme" placeholder="+添加" :readonly='true' style="width: 250px;"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item  prop="orderTime">
                                    <label slot="label" style="font-size: 13px">下单时间：</label><br/>
                                    <el-date-picker
                                        v-if="this.xg==0"
                                        v-model="ddlist.orderTime"
                                        type="datetime"
                                        placeholder="选择日期时间"
                                        align="right"
                                        :picker-options="pickerOptions"
                                        style="width:250px">
                                    </el-date-picker>
                                    <el-date-picker
                                            v-if="this.xg==1"
                                            :disabled="true"
                                            v-model="ddlist.orderTime"
                                            type="datetime"
                                            placeholder="选择日期时间"
                                            align="right"
                                            :picker-options="pickerOptions"
                                            style="width:250px">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="width:250px">
                                    <label slot="label" style="font-size: 13px">完成时间：</label><br/>
                                    <el-date-picker
                                            :disabled="true"
                                            v-model="ddlist.orderWctime"
                                            type="datetime"
                                            placeholder="选择日期时间"
                                            align="right"
                                            :picker-options="pickerOptions"
                                            style="width:250px">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item style="width:250px">
                                    <el-form-item style="width:250px">
                                        <label slot="label" style="font-size: 13px">订单金额：</label><br/>
                                        <el-input v-model="ddlist.orderTotal" :disabled="true"></el-input>
                                    </el-form-item>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="width:250px">
                                    <label slot="label" style="font-size: 13px">毛利：</label><br/>
                                    <el-input v-model="ddlist.orderGross" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item style="width:250px">
                                    <el-form-item style="width:250px">
                                        <label slot="label" style="font-size: 13px">剩余回款金额：</label><br/>
                                        <el-input v-model="ddlist.orderReturned" :disabled="true"></el-input>
                                    </el-form-item>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item style="width:250px">
                                    <label slot="label" style="font-size: 13px">开票金额：</label><br/>
                                    <el-input v-model="ddlist.orderInvoice" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10">
                                <el-form-item style="width:260px">
                                    <label slot="label" style="font-size: 13px">所有者：</label><br/>
                                    <el-input v-model="ddlist.orderPeople" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="18">
                                <el-form-item>
                                    <label slot="label" style="font-size: 13px">备注：</label><br/>
                                    <el-input v-model="ddlist.orderRemark"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <span style="margin-left:30px;font-size: 13px">产品</span>
                    <br/>
                    <template>
                        <el-table
                                :data="this.ddlist.zorderdetailsByOrderId"
                                style="width: 80%;margin-left: 10px;font-size:13px">
                            <el-table-column
                                    align="center"
                                    prop="prodetailId.productName"
                                    label="产品名称"
                                    width="90">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="产品规格"
                                    width="150">
                                <template slot-scope="s">
                                        <span v-for="pro in s.row.prodetailId.qmodeldetails" :key="pro.prodetailId">
                                            {{pro.modetContent}}
                                        </span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="prodetailId.prodetaiJpri"
                                    label="进价"
                                    width="90">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="售价"
                                    prop="orderdetailJg"
                                    width="90">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="数量"
                                    prop="orderdetailNumber"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="折扣（%）"
                                    prop="orderdetailDiscount"
                                    width="90">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="orderdetailTital"
                                    label="合计"
                                    width="90">
                            </el-table-column>
                        </el-table>
                    </template>
                    <br/>
                    <div style="margin-left:440px;font-size: 12px;margin-top: 10px;">
                        <span>总金额：</span>
                        {{ddlist.orderTotal}}
                        <span>元</span>
                    </div>
                    <br/>
                </el-scrollbar>
                <!--确定按钮 设置了固定定位-->
                <div style="text-align: center;width: 80%;position: absolute;top:640px;left:230px;" class="dialog-footer">
                    <!--跳合同订单列表页面-->
                    <el-button @click="tzdz()">取 消</el-button>
                    <el-button type="primary"  @click="addbusiness('ddlist')">确 定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {formatTimeToStr} from '../router//format.js'
    export default {
        name: "ZxinzenHeton" ,
        data () {
            var hueikuan = (rule, value, callback) => {
            if (this.ddlist.clientId.clientName === null || this.ddlist.clientId.clientName === '') {
                callback(new Error('请先选择客户'));
            } else {
                if (this.ddlist.conId.conTheme === '' || this.ddlist.conId.conTheme === null) {
                    callback(new Error('请选择计划'));
                }else {
                    callback()
                }
            }
        };
            var kehua = (rule, value, callback) => {
                if (value.clientName === null || value.clientName === '') {
                    callback(new Error('请选择客户'));
                }else {
                    callback()
                }
            };
            return {
                rules: {
                    clientId: [
                        {validator: kehua, required: true, trigger: ['blur','change']},
                    ],
                    conId: [
                        {validator: hueikuan, required: true, trigger: ['blur','change']},
                    ],
                    orderTime: [
                        {required: true, message: '请下单时间', trigger: 'change' },
                    ]
                },
                pickerOptions: {//开票日期快捷选择方式
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [
                        {
                            text: '今天',
                            onClick(picker) {
                                picker.$emit('pick', new Date());
                            }
                        }, {
                            text: '一周前',
                            onClick(picker) {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', date);
                            }
                        }]
                },
                ddlist:{
                    orderId:0,
                    clientId:{
                        clientId:0,
                        updateTime:'',
                        clientIndustry:'',
                        clientSource:'',
                        clientUrl:'',
                        establishPerson:'',
                        establishTime:'',
                        clientName:'',
                        clientRank:'',
                        clientPhone:'',
                        clientMobile:'',
                        clientSite:'',
                        clientRemark:'',
                        clientPeople:'',
                        clientCjpeople:'',
                        clientState:0,
                        clientIffollowup:0,
                        tfyclueFormsByClueId:'',
                        tfylinkmanFormsByClientId:'',
                        zbartersByClientId:'',
                        zcontractsByClientId:'',
                        zdeliverylogsByClientId:'',
                        zinvoicesByClientId:'',
                        zordersByClientId:'',
                    },
                    conId:{
                        conId:0,
                        busId:null,
                        clientId:null,
                        conNo:null,
                        conTheme:'',
                        conTotal:'',
                        conStarttime:'',
                        conFinishtime:'',
                        conSignatory:'',
                        mySignatory:'',
                        conTime:'',
                        conState:'',
                        conAccessory:'',
                        conRemark:'',
                        conPeople:''
                    },
                    orderNo:'',
                    orderTheme:'',
                    orderTotal:0,
                    orderReturned:0,
                    orderInvoice:0,
                    orderGross:0,
                    orderTime:'',
                    orderWctime:'',
                    orderExchange:'否',
                    orderReturn:'否',
                    orderState:'执行中',
                    orderRemark:'',
                    orderPeople:'',
                    orderZt:0,
                    orderJfzt:'待交付',
                    orderHkzt:'待回款',
                    barterId:{
                        barterId:-1,
                        barterTheme:"",
                    },
                    zorderdetailsByOrderId:[]
                }, //订单主表信息
                xg:0,//是否是修改
                kehu:false,//客户弹出框
                kehuinput:'',//客户弹框搜索框
                kehulist:[],//客户表格信息
                pageSize:5,//客户分页页大小
                currPage:1,//客户当前页码，默认为1
                totalSize:0,//客户总记录数
                heton:false,//合同弹出框
                hetoninput:'',//合同弹框搜索框
                hetonlist:[],//合同表格信息
                pageSize2:5,//合同分页页大小
                currPage2:1,//合同当前页码，默认为1
                totalSize2:0,//合同总记录数
                dbuspros:[],//合同详情产品集合
                hhdx:{},
                dz:'',
                ys:1,
                ydx:10
            };
        } ,
        methods:{
            tzdz(){
                if(this.dz==='htxq'){
                    this.$router.push({
                        path:'/htxianqin',
                        query: {key:this.ddlist.conId}
                    });
                }else if(this.dz==='hhxq'){
                    this.hhdcxhhdinitData(this.hhdx.barterId)
                    this.$router.push({
                        path:'/hhxianqin',
                        query: {key:this.hhdx}
                    });
                }else if(this.dz==='htzy'){
                    this.$router.push({
                        path:'/heton',
                        query: {ys:this.ys,ydx:this.ydx}
                    });
                }else if(this.dz==='hhzy'){
                    this.$router.push({
                        path:'/huanhuo',
                        query: {ys:this.ys,ydx:this.ydx}
                    });
                }else {
                    this.$router.push({
                        path:'/dindan',
                        query: {ys:this.ys,ydx:this.ydx}
                    });
                }
            },
            //确定按钮
            addbusiness(formName) {
                if(this.xg!=0){
                    this.xzfapiao();
                }else{
                    this.$refs[formName].validate(valid => {
                        this.print(valid);
                        window.console.log(valid)
                        if (valid) {
                            this.xzfapiao();
                        }else{
                            this.$message({
                                message: '验证不通过！',
                                type: 'warning'
                            });
                            return false;
                        }

                    });
                }
            },
            /*初始化商机编号*/
            initbusNo() {
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                if (month < 10) {
                    month = "0" + month;
                }
                if (day < 10) {
                    day = "0" + day;
                }
                //使用年月日作为中间数
                var busnosj = year + month + day;

                //使用时间戳作为最后五位随机数
                var a = date.getTime() + "";
                var b = a.substring(8, 13);

                //最后编号
                var busno = "DD_" + busnosj + "_" + b;
                this.ddlist.orderNo = busno;
            },
            /*当前页方法*/
            handleCurrentChange(val) {
                this.initData(val);
            },
            /*当前页方法*/
            handleCurrentChange2(val) {
                this.hetoninitData(val);
            },
            cx(){
                this.initData(this.currPage);
            },
            //合同弹框搜索方法
            cx2(){
                this.hetoninitData(this.currPage2);
            },
            //点击合同输入框就查询合同信息
            dakai(){
                this.hetoninitData(this.currPage2);
            },
            //选择合同确定按钮
            xzheton() {
                this.$refs.hetonlist.selection.forEach((pro)=>{
                    this.ddlist.conId=pro;
                    this.ddlist.orderTotal=pro.conTotal;
                    this.ddlist.orderReturned=pro.conTotal;
                    this.ddlist.orderGross=pro.conGross;
                });
                this.heton=false;
                this.hetoninput='';
                this.hetoncpinitData();
                this.dbuspros.forEach((xq,i)=>{
                    this.ddxq[i] = xq
                })
            },
            //合同查询方法
            hetoninitData(dd){
                this.$axios.post("http://localhost:8088/heton/list_ht",this.qs.stringify(
                    {search:this.hetoninput,search2:this.ddlist.clientId.clientId, page:dd, size:this.pageSize2,}))
                    .then(v=>{
                        this.hetonlist = v.data.rows;
                        this.totalSize2 = v.data.total;
                    })
                    .catch()
            },
            //更具换货单ID查询换货单详情产品
            hhxqinitData(dd){
                this.$axios.post("http://localhost:8088/huanhuo/hhdcp",this.qs.stringify(
                    {search:dd}))
                    .then(v=>{
                        v.data.forEach((xq,i)=>{
                            const htxq = {};
                            this.$set(htxq,'orderdetailId',0);
                            this.$set(htxq,'orderdetailNumber',xq.barterdetailsNumber);
                            this.$set(htxq,'orderdetailRealitynum',xq.barterdetailsNumber);
                            this.$set(htxq,'prodetailId',xq.prodetailId);
                            this.$set(htxq,'orderdetailJfnumber',xq.barterdetailsNumber);
                            this.$set(htxq,'orderdetailWxnum',0);
                            this.ddlist.zorderdetailsByOrderId.splice(i,0,htxq);
                        })


                    })
                    .catch()
            },
            //选择客户确定按钮
            xzkehu() {
                this.$refs.kehulist.selection.forEach((pro)=>{
                    this.ddlist.clientId=pro;
                });
                this.kehu=false;
                this.kehuinput='';
            },
            //客户查询方法
            initData(dd){
                this.$axios.post("http://localhost:8088/dindan/kehu_list", this.qs.stringify(
                    {search:this.kehuinput, page:dd, size:this.pageSize,}))
                    .then(v=>{
                        this.kehulist = v.data.rows;
                        this.totalSize = v.data.total;
                    })
                    .catch()
            },
            //根据合同ID查询合同详情所有产品信息
            hetoncpinitData(){
                this.$axios.post("http://localhost:8088/heton/list_htxqcp",this.qs.stringify(
                    {search:this.ddlist.conId.conId}))
                    .then(v=>{
                        this.dbuspros = v.data;
                        this.dbuspros.forEach((xq,i)=>{
                            const htxq = {};
                            this.$set(htxq,'orderdetailId',0);
                            this.$set(htxq,'orderdetailNumber',xq.condeNum);
                            this.$set(htxq,'orderdetailRealitynum',xq.condeNum);
                            this.$set(htxq,'orderdetailTital',xq.condeTital);
                            this.$set(htxq,'orderdetailDiscount',xq.condeDiscount);
                            this.$set(htxq,'prodetailId',xq.prodetailId);
                            this.$set(htxq,'orderdetailJg',xq.condeJg);
                            this.$set(htxq,'orderdetailJfnumber',xq.condeNum);
                            this.$set(htxq,'orderdetailWxnum',0);
                            this.ddlist.zorderdetailsByOrderId.splice(i,0,htxq);
                        })
                    })
                    .catch()
            },
            //根据合同ID查询合同详情所有产品信息
            ddxqinitData(dd){
                this.$axios.post("http://localhost:8088/dindan/list_ddxqcp",this.qs.stringify(
                    {search:dd}))
                    .then(v=>{
                        this.ddlist.zorderdetailsByOrderId=v.data;
                    })
                    .catch()
            },
            //新增修改订单
            xzfapiao(){
                this.$axios.post("http://localhost:8088//dindan/add",this.ddlist)
                    .then(()=>{
                        if(this.ddlist.orderId==0){
                            this.$message({
                                showClose: true,
                                type: 'success',
                                message: '新增成功!',
                            });
                        }else{
                            this.$message({
                                showClose: true,
                                type: 'success',
                                message: '修改成功!',
                            });
                        }
                        this.tzdz();
                    }).catch(()=>{
                        this.$message({
                            showClose: true,
                            message: '新增失败',
                            type: 'error'
                        });
                    }
                )
            },
            //客户查询方法
            hhddcx(dd){
                this.$axios.get("http://localhost:8088/dindan/hh_dd",{params:{search:dd}})
                    .then(v=>{
                        this.ddlist.clientId=v.data[0].clientId;
                        this.ddlist.conId = v.data[0].conId;
                        this.xg=1;
                        this.ddlist.orderTime=new Date();
                        this.hhxqinitData(this.hhdx.orderId.orderId);
                        }
                    ).catch()
            },
            //换货ID查询换货单
            hhdcxhhdinitData(aa){
                this.$axios.post("http://localhost:8088/huanhuo/hhdcxhhd",this.qs.stringify(
                    {search:aa}))
                    .then(v=>{
                        this.hhdx = v.data
                    })
                    .catch()
            },
        },
        created: function () {
            this.initData(this.currPage);
            this.initbusNo();
            this.ddlist.orderTime = new Date();
            this.ddlist.orderPeople= JSON.parse(localStorage.getItem("user")).empName;
            if(this.$route.query.key!=null){
                this.ddlist=this.$route.query.key;
                this.ddxqinitData(this.ddlist.orderId);
                this.xg = 1;
            }
            if(this.$route.query.xzdd!=null){
                this.ddlist.conId=this.$route.query.xzdd;
                this.ddlist.clientId=this.$route.query.xzdd.clientId;
                this.ddlist.orderTotal=this.$route.query.xzdd.conTotal;
                this.ddlist.orderReturned=this.$route.query.xzdd.conTotal;
                this.ddlist.orderGross=this.$route.query.xzdd.conGross;
                this.hetoncpinitData();
                this.xg=1;
            }
            if(this.$route.query.dz!=null){
                this.dz=this.$route.query.dz;
            }
            if(this.$route.query.ys!=null){
                this.ys=this.$route.query.ys;
            }
            if(this.$route.query.ydx!=null){
                this.ydx=this.$route.query.ydx;
            }
            if(this.$route.query.xzhh!=null){
                this.hhdx=this.$route.query.xzhh;
                this.ddlist.orderHhdd='是';
                this.ddlist.barterId.barterId=this.hhdx.barterId;
                this.hhddcx(this.hhdx.orderId.orderId);
            }
        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd");
                } else {
                    return "";
                }
            }
        }
    }
</script>

<style scoped>
    .shugan{
        border-left-color: rgb(70, 205, 207);
        border-left-width: 1.8px;
        height: 10px;
        border-left-style: solid;
        display: inline;
        font-size: 13px;
        margin-left: 25px;
    }

    /deep/ .el-scrollbar__wrap {
        overflow: scroll;
        width: 120%;
        height: 100%;
    }
</style>